本篇文章提及以下部分
google早期在2014年開發了一種設計語言—material design,在web和mobile當中非常的流行,
透過設計可以呈現如同實體般的光線與陰影,透過來自實體世界的紋理重新設計了紙張和墨水的媒介作為設計理念。
Material UI library是實現了google公司Material design的react UI library。
為了避免Material Design和Material UI混淆,公司近年來改名成了MUI,而且很多人也已經將Material UI縮寫稱為MUI,因此MUI也替公司提供了一個良好的識別性
根據官方的建議Material UI具有以下的優點
根據官方文件上定義大致可以解釋為具備簡單快速不必重複造輪子,而且擁有基本美感,對於像是後端開發者也是十分值覺得可以使用,另外也可以客製化一些元件,也因為開發得早,則是擁有龐大的社群支持。
安裝方式使用npm輸入以下語法
npm install @mui/material @emotion/react @emotion/styled
預設的樣式引擎是emotion,但是如果想要使用styled-component的話也是可以,改成輸入以下指令
npm install @mui/material @mui/styled-engine-sc styled-components
比較需要注意的地方是如果網站是SSR(server side render)的專案,例如next.js,則強烈建議使用emotion,否則可能會遇到一些babel轉譯的問題詳細可以觀看官方的How to switch to styled-components的部分
Material UI預設不會加載任何字體,但預設Material UI是使用 Roboto的字體選項,因此如果想要加載字體可以透過兩種方式實現
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
/>
我們在public的資料夾底下的html檔案添加CDN
<!DOCTYPE html>
<!-- 中間省略 -->
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
/>
<!-- 添加在這裡 -->
<title>React App</title>
</head>
<!-- Body省略 -->
</html>
在npm輸入以下
npm install @fontsource/roboto
之後加載在程式進入點
在index.js檔案撰寫如下
import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import "@fontsource/roboto/300.css";
import "@fontsource/roboto/400.css";
import "@fontsource/roboto/500.css";
import "@fontsource/roboto/700.css";
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<App />);
可以使用兩種方式,分為直接import和大括號的方式
範例如下
import Typography from '@mui/material/Typography';
import { Typography } from '@mui/material';
使用大括號的方式會讓效能降低一點點(備註),但可以簡潔程式碼,尤其是當有許多元件要載入的時候就不必撰寫如下import許多不同的行數
備註:更多說明可以參考Bundle size matters
章節
import Typography from '@mui/material/Typography';
import Stack from '@mui/material/Stack';
import Button from '@mui/material/Button';
接下來的範例僅撰寫jsx的部分,將會省略import和return的程式碼
<div>
<Typography>
測試
</Typography>
</div>
在未帶入任何屬性的情況下,預設是一個p標籤如下圖
在Typography的屬性帶入variant,值設定為h1的話可以讓最後顯示的標籤變成h1標籤
<div>
<Typography variant="h1">
Create page
</Typography>
</div>
其他比較常見的css屬性都可以找到相對應的props傳入值到component裡面如下
<div>
<Typography
align="center"
noWrap="true"
color="primary"
>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Similique aliquam iure accusantium tenetur maxime harum provident, facilis voluptatibus quaerat architecto exercitationem animi quia ut ex distinctio vel error nihil recusandae.
</Typography>
</div>
noWrap={true}
<Typography
variant="h6"
component="h2" //最後是h2標籤,但外觀是material h6的樣貌
align="center"
gutterBottom
noWrap={true}
color="primary"
>
測試
</Typography>
如下圖外觀是h6大小,但實際標籤是h2
Material UI(更名為MUI)提供了一個良好的開發體驗,程式的複用性要點使我們不必自己造輪子,希望透過本篇介紹能夠讓大家初步認識Material UI。